<template>
    <div class="container">
        <div class="option" v-show="isShow">
            <el-button type="primary" @click="readyScreenShot('screen:0:0')">点击截图</el-button>
            <el-button type="primary" @click="readyScreenShot('screen:1:0')">屏幕2截图</el-button>
            <el-button type="primary" v-if="url != ''" @click="save">保存</el-button>
            <el-button type="primary" v-if="url != ''" @click="() => { url = '' }">清空</el-button>
        </div>
        <div class="pic" v-show="isShow && url != ''">
            <el-image :src="url" fit="contain" />
        </div>
    </div>
</template>
<script setup>
import { ref } from 'vue'
import ScreenShot from "js-web-screen-shot";
const url = ref('')
const isShow = ref(true)
const readyScreenShot = (screenId) => {
    isShow.value = false
    document.querySelector('.container').style.background = 'none'
    window.electron.ipcRenderer.send('getColor',);
    doScreenShot(screenId)
}
const doScreenShot = async (screenId) => {
    // 下面这两块自己考虑
    const sources = await getDesktopCapturerSource(); // 这里返回的是设备上的所有窗口信息
    const stream = await getInitStream(
        sources.filter((e) => {
            console.log('e', e);
            return e.id == screenId

        })[0]
    );
    new ScreenShot({
        enableWebRtc: true, // 启用webrtc
        screenFlow: stream, // 传入屏幕流数据
        level: 999,
        maskColor: {
            r: 220,
            g: 220,
            b: 220,
            a: 0.5
        }, // 蒙层颜色
        closeCallback: () => {
            console.log('取消了截图');
            window.electron.ipcRenderer.send('completeGetColor');
            isShow.value = true
            document.querySelector('.container').style.background = '#fff'

        },
        completeCallback: ({ base64, cutInfo }) => {
            console.log('截图完成', base64, cutInfo);
            url.value = base64
            window.electron.ipcRenderer.send('completeGetColor');
            isShow.value = true
            document.querySelector('.container').style.background = '#fff'

        }
    });
};
const save = () => {
    window.electron.ipcRenderer.send('saveScreenShot', url.value);
}
const getDesktopCapturerSource = async () => {
    return await window.electron.ipcRenderer.invoke("getDesktopCapturerSource", []);
};
const getInitStream = async (source, audio) => {
    return new Promise((resolve, _reject) => {
        // 获取指定窗口的媒体流
        (navigator.mediaDevices)
            .getUserMedia({
                audio: audio
                    ? {
                        mandatory: {
                            chromeMediaSource: "desktop",
                        },
                    }
                    : false,
                video: {
                    mandatory: {
                        chromeMediaSource: "desktop",
                        chromeMediaSourceId: source.id,
                    },
                },
            })
            .then((stream) => {
                resolve(stream);
            })
            .catch((error) => {
                console.log(error);
                resolve(null);
            });
    })
}

</script>
<style lang="less" scoped>
.container {
    width: 100%;
    height: 100%;
    padding: 10px;
    position: hidden;
    border-radius: 10px;
    overflow: auto;
    // border: 1px solid #333;
    background: #fff;
    color: #333;
    opacity: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    -webkit-app-region: no-drag;
    .option {
        width: 100%;
        display: flex;
        align-items: center;
        margin-bottom: 5px;
    }

    .pic {
        width: 100%;
        height: 232px;
        // border: 1px solid #333;

        .el-image {
            width: 100%;
            height: 100%;
        }
    }
}
</style>